<template>
  <LxyBox title="供应链金融服务">
    <div class="supply-chain-finance-service">
      <div class="left">
        <div class="img">
          <img src="@/assets/bigscreen3/融资金额.png" alt="" class="ic" />
        </div>
        <count-to
          class="val"
          :startVal="0"
          :endVal="Number(amount.value)"
          :duration="1000"
          :decimals="2"
        ></count-to>
        <p class="key">客户{{ amount.name }}({{ amount.unit }})</p>
      </div>
      <div class="right">
        <div class="item first">
          <div class="img">
            <img
              src="@/assets/bigscreen3/icon_shouquan.png"
              alt=""
              class="ic"
            />
          </div>
          <div class="data">
            <count-to
              class="val"
              :startVal="0"
              :endVal="Number(credit.value)"
              :duration="1000"
              :decimals="2"
            ></count-to>
            <p class="key">客户{{ credit.name }}({{ credit.unit }})</p>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="@/assets/bigscreen3/icon_shouxin.png" alt="" class="ic" />
          </div>
          <div class="data">
            <count-to
              class="val"
              :startVal="0"
              :endVal="Number(compCount.value)"
              :duration="1000"
            ></count-to>
            <p class="key">{{ compCount.name }}({{ compCount.unit }})</p>
          </div>
        </div>
      </div>
    </div>
  </LxyBox>
</template>

<script setup>
import LxyBox from "./lxyBox";
import { ref, onMounted } from "vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";
import { ajax } from "@/store/service";

const amount = ref({ value: 0 });
const credit = ref({ value: 0 });
const compCount = ref({ value: 0 });

const init = async () => {
  const [res] = await ajax.fund();
  amount.value=res.amount
  credit.value=res.credit
  compCount.value=res.compCount
};

onMounted(() => {
  init();
});


</script>
<style scoped lang='scss'>
.supply-chain-finance-service {
  width: 100%;
  display: flex;
  justify-content: center;
  height: vh(193);
  align-items: center;
  .left {
    height: vh(150);
    background: url("@/assets/bigscreen3/水桶.png");
    background-size: 100% 100%;
    margin-right: vw(45);
    box-sizing: border-box;
    padding-top: vh(14);
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      display: flex;
      justify-content: center;
      margin-bottom: vh(8);
      .ic {
        height: vh(36);
      }
    }
    .val {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: vh(30);
      color: #66ffff;
      line-height: vh(28);
      text-align: left;
      font-style: normal;
      margin-bottom: vh(28);
    }
    .key {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-size: vh(16);
      color: #ffffff;
      line-height: vh(24);
      text-align: left;
      font-style: normal;
      text-align: center;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .item {
      display: flex;
      .img {
        display: flex;
        align-items: center;
        .ic {
          height: vh(36);
          margin-right: vw(12);
        }
      }

      .data {
        .val {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: vh(24);
          color: #ffffff;
          letter-spacing: 1px;
          text-align: left;
          font-style: normal;
          margin-bottom: vh(8);
        }
        .key {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: vh(14);
          color: #ffffff;
          text-align: left;
          font-style: normal;
          opacity: 0.8;
        }
      }
    }
    .first {
      margin-bottom: vh(30);
    }
  }
}
</style>